<template>
  <div class="icon__container">
    <p class="tip">说明：直接输入icon名称即可使用，简化了各个图标引入步骤。但是目前是全部引入icon的方案，后续会按需引入减少包的体积</p>
    <pre>&lta-icon type="AndroidOutlined" /&gt</pre>
    <ul class="icons">
      <!-- <li><a-icon type="AndroidOutlined" /></li>
      <li><a-icon type="AppleOutlined" /></li>
      <li><a-icon type="TwitterOutlined" /></li>
      <li><a-icon type="DropboxOutlined" /></li> -->
       <!-- 使用 v-for 遍历图标名称列表 -->
       <li v-for="iconName in iconNames" :key="iconName">
        <a-icon :type="iconName" />
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted,ref } from 'vue'
import aIcon from '@/components/aicon/aicon.vue'
import * as antIcons from '@ant-design/icons-vue'


export default defineComponent({
  name: 'el_icon',
  components: {
    aIcon
  },
  setup () {
    onMounted(() => {
      console.log(123)
    })
    // 提取所有图标的名称
    const iconNames = ref(Object.keys(antIcons).filter(key => key !== 'default' && key !== 'createFromIconfontCN' && key!=='getTwoToneColor'))
    debugger
    return {
      iconNames
    }
  }
})
</script>
<style lang="scss" scoped>
.icon__container {
  padding: 20px;
  & .tip {
    font-size: 14px;
    font-weight: bold;
  }
  & pre {
    background-color: #f6f6f6;
    padding: 10px
  }
  & .icons {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    & li {
      margin-right: 10px;
      list-style: none;
      font-size: 24px;
      cursor: pointer;
    }
  }
}
</style>